<template>
  <div class="page_account" id="account_register">
    <div class="warp">
      <div class="container">
        <div class="row flex_cc">
          <div class="col-12 col-md-6">
            <div class="card flex_cc">
              <div class="form_register">
                <b-form>
                  <b-form-group
                    id="input-group-1"
                    label="用户名:"
                    label-for="input-1"
                    :state="validation_username"
                    :invalid-feedback="invalid_username"
                    valid-feedback="校验通过"
                  >
                    <b-form-input
                      id="input-1"
                      v-model="form.username"
                      type="text"
                      placeholder="用户名"
                      trim
                    ></b-form-input>
                  </b-form-group>

                  <b-form-group
                    id="input-group-2"
                    label="设置密码:"
                    label-for="input-2"
                    :state="validation_password"
                    invalid-feedback="密码长度为在5-16个字符"
                    valid-feedback="校验通过"
                  >
                    <b-form-input
                      id="input-2"
                      v-model="form.password"
                      type="password"
                      placeholder="密码"
                      trim
                    ></b-form-input>
                  </b-form-group>
                  <b-form-group
                    id="input-group-2"
                    label="确认密码:"
                    label-for="input-2"
                    :state="validation_confirm_password"
                    invalid-feedback="密码不一致"
                    valid-feedback=""
                  >
                    <b-form-input
                      id="input-2"
                      v-model="form.confirm_password"
                      type="password"
                      placeholder="确认密码"
                      trim
                    ></b-form-input>
                  </b-form-group>
                  <b-form-group
                    id="input-group-2"
                    label="邮箱:"
                    label-for="input-2"
                    :state="validation_email"
                    invalid-feedback="邮箱格式:example@163.com"
                    valid-feedback=""
                  >
                    <b-form-input
                      id="input-2"
                      v-model="form.email"
                      type="email"
                      placeholder="example@123.com"
                      trim
                    ></b-form-input>
                  </b-form-group>
                  <b-form-group
                    id="input-group-2"
                    label="昵称:"
                    label-for="input-2"
                    :state="validation_nickname"
                    invalid-feedback="最多12个字符"
                    valid-feedback=""
                  >
                    <b-form-input
                      id="input-2"
                      v-model="form.nickname"
                      type="text"
                      placeholder="昵称"
                      trim
                    ></b-form-input>
                  </b-form-group>
                  <!-- 身份选择 -->
                  <b-form-group
                    id="input-group-2"
                    label="身份:"
                    label-for="input-2"
                  >
                    <b-form-select
                      id="user_group"
                      v-model="form.user_group"
                      :options="user_groups"
                      placeholder="请选择身份"
                    ></b-form-select>
                  </b-form-group>
                  <!-- 卖家信息 -->
                  <div v-if="form.user_group == '商家'">
                    <b-form-group
                      id="input-group-2"
                      label="商家名称:"
                      label-for="input-2"
                      :state="validation_business_name"
                      invalid-feedback="请输入2~12个字符"
                      valid-feedback="校验通过"
                    >
                      <b-form-input
                        id="input-2"
                        v-model="form_business.business_name"
                        type="text"
                        placeholder="商家名称"
                        trim
                      ></b-form-input>
                    </b-form-group>
                    <b-form-group
                      id="input-group-2"
                      label="电话:"
                      label-for="input-2"
                      :state="validation_business_phone"
                      invalid-feedback="请输入11位手机号码"
                      valid-feedback="校验通过"
                    >
                      <b-form-input
                        id="input-2"
                        v-model="form_business.business_phone"
                        type="text"
                        placeholder="电话"
                        trim
                      ></b-form-input>
                    </b-form-group>
                    <b-form-group
                      id="input-group-2"
                      label="身份证:"
                      label-for="input-2"
                      :state="validation_id_card"
                      invalid-feedback="请输入19位身份证号码"
                      valid-feedback="校验通过"
                    >
                      <b-form-input
                        id="input-2"
                        v-model="form_business.id_card"
                        type="text"
                        placeholder="身份证"
                        trim
                      ></b-form-input>
                    </b-form-group>
                  </div>

                  <div class="btns_bottom">
                    <div class="btn_item" @click="register()">注册</div>
                    <div class="forgot_nav" @click="$nav('/account/forgot')">
                      忘记密码
                    </div>
                  </div>
                </b-form>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="card flex_cc">
              <div class="register_nav identify_choose">
                <div style="text-align: center; margin-bottom: 20px">
                  已有账户?
                </div>
                <div class="btn_item" @click="$nav('/account/login')">登录</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import mixin from "../../mixins/page.js";
export default {
  components: {},
  mixins: [mixin],
  data() {
    return {
      url_get_list: "~/api/user_group/get_list",
      form: {
        username: "",
        password: "",
        confirm_password: "",
        email: "",
        phone: "",
        user_group: "买家",
        nickname: "",
      },
      form_business: {
        business_name: "",
        business_phone: "",
        id_card: "",
      },
      // 在dropdowm列表所选中项的user_groups
      user_groups: [
        { value: "买家", text: "买家" },
        { value: "商家", text: "商家" },
      ],
      // 在dropdowm列表所选中项的id
      group_id: "",
      // 用户组列表
      list: [],
      // 错误反馈
      invalid_username: "账户名长度为在5-16个字符",
    };
  },
  onLoad() {},
  onReady() {},
  methods: {
    // 注册基本信息
    register() {
      var condition =
        this.validation_username &&
        this.validation_password &&
        this.validation_confirm_password &&
        this.validation_email &&
        this.validation_nickname;
      if (!condition) {
        this.$toast("输入不合法");
        return;
      }

      this.$post("~/api/register?", this.form, (res) => {
        if (res.result) {
          this.$nav("/account/login");
        } else if (res.error) {
          this.$toast(res.error.message);
        }
      });
      //注册卖家信息
      if (this.form.user_group == "商家") {
        var condition =
          this.validation_business_name &&
          this.validation_business_phone &&
          this.validation_id_card;
        if (!condition) {
          this.$toast("输入不合法");
          return;
        }
        this.$post("~/api/business/add?", this.form_business, (res) => {
          if (res.result) {
            this.$nav("/account/login");
          } else if (res.error) {
            this.$toast(res.error.message);
          }
        });
      }
    },
  },
  computed: {
    // 验证用户名
    validation_username() {
      var length = this.form.username.length;
      if (!length) {
        return null;
      }
      if (length > 4 && length < 17) {
        return true;
      } else {
        this.invalid_username = "账户名长度为在5-16个字符";
        return false;
      }
    },
    // 验证密码
    validation_password() {
      var length = this.form.password.length;
      if (!length) {
        return null;
      }
      return length > 4 && length < 17;
    },
    //再次验证密码
    validation_confirm_password() {
      return this.form.confirm_password === this.form.password;
    },
    //验证邮箱
    validation_email() {
      var length = this.form.email.length;
      if (!length) {
        return true;
      }
      return length > 4 && length < 17;
    },
    //验证昵称
    validation_nickname() {
      var length = this.form.nickname.length;
      if (!length) {
        return true;
      }
      return length > 1 && length < 13;
    },
    //验证卖家名称
    validation_business_name() {
      var length = this.form_business.business_name.length;
      if (!length) {
        return null;
      }
      return length > 1 && length < 13;
    },
    //验证卖家电话
    validation_business_phone() {
      var length = this.form_business.business_phone.length;
      if (!length) {
        return null;
      }
      return length == 11;
    },
    //验证卖家身份证
    validation_id_card() {
      var length = this.form_business.id_card.length;
      if (!length) {
        return null;
      }
      return length > 1 && length < 20;
    },
  },
};
</script>

<style scoped>
.card {
  word-wrap: break-word;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.page_account {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex_cc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.form_register {
  width: 80%;
}

.register_nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 80%;
}

.register_nav .btns_bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.btn_item {
  cursor: pointer;
  width: 100%;
  background-color: var(--color_primary);
  color: #fff;
  text-align: center;
  height: 48px;
  line-height: 48px;
}
.forgot_nav {
  text-align: left;
  font-size: 10px;
  margin-top: 20px;
  cursor: pointer;
}
</style>
